Dev/listener multiplexer #1542

bakape · 2020-09-03T23:14:19Z

Description

Reduces the overhead of creating and dropping event listeners on each patch by registering them inside a global multiplexer. Also provides opt-in callback flags to additionally increase performance at the user's discretion.

Features:

The core functionality is done, so making this ahead of completion to potentially speed up the review.

Fixes #943

Breaking change

Handling bubbled events by default is expensive. This is the current behaviour in yew. With this PR events do not bubble by default and instead users have to either make a small change to their code or opt into a global deoptimization for that specific event kind.

Example:

<a onclick=self.link.callback(|| ())>
    <span></span>
</a>

becomes

let cb = self.link.callback(|| ());
<a onclick=cb.clone()>
    <span onclick=cb></span>
</a>

Or, in case the user really wants event bubbling:

<a onclick=self.link.callback_with_flags(HANDLE_BUBBLING, || ())>
    <span>
	<span></span>
    	<span></span>	
    </span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</a>

This causes all click events globally to perform upward DOM tree traversal to find any other listeners to call.

Checklist:

I have opened a PR against https://github.com/yewstack/js-framework-benchmark: Dev/listener multiplexer js-framework-benchmark#12

web_sys implementaion compiles but the std_web implementation is unfinished. Keeping this only to commit curretn progress before reverting std_web.

…iplexer

Feature parity with master, except for bubbling.

…iplexer

siku2

Will take a closer look at the code itself, here are just a few things I noticed.

ci/run_tests.sh

yew/src/callback.rs

yew/src/html/listener/listener_stdweb.rs

yew/src/html/listener/listener_web_sys.rs

yew/src/callback.rs

yew/Cargo.toml

Co-authored-by: Simon <simon@siku2.io>

jstarry · 2020-09-08T15:51:02Z

Handling bubbled events by default is expensive. This is the current behaviour in yew. With this PR events do not bubble by default and instead users have to either make a small change to their code or opt into a global deoptimization for that specific event kind.

I feel that enabling event bubbling is a better dev experience. I would prefer it to be the default, but devs can choose to optimize for performance and disable if it needed.

I just ran perf benchmarks. The partial update improvements are great and expected! I'm curious what made row creation slow down though, any ideas?

bakape · 2020-09-08T16:45:40Z

I feel that enabling event bubbling is a better dev experience. I would prefer it to be the default, but devs can choose to optimize for performance and disable if it needed.

So a feature to not add HANDLE_BUBBLED to the callback flags by default?

I just ran perf benchmarks. The partial update improvements are great and expected! I'm curious what made row creation slow down though, any idea?

I'd bet it's the listener equality check. I'm not too familiar with the VTag lifecycle yet. Does a diff on the exact same VTag (same view() call) ever happen? As far as I understand, that is the only scenario, when listeners can be equal. I have a feeling it's actually faster to never check listener equality and always replace them.

…iplexer

Seems easybench-wasm does not support specifying a module path.

bakape · 2020-09-11T20:07:40Z

@jstarry Listener registration optimized.

…iplexer

bakape · 2021-08-15T12:48:39Z

@siku2 @jstarry Resolved all mentioned issues, reduced the amount of features, API changes and cognitive load due to configuration variations. Benchmark results still look good.

@mc1098 I see this conflicts with some of your PRs, so you might want to take a look as well.

mc1098 · 2021-08-15T16:11:42Z

The conflicts are fine :)

Remove InputData & ChangeData #2000 is pretty small and the conflicts would be pretty easy to fix
Add custom event support #1991 still needs a good bit of bike shedding anyway
Haven't reviewed all of this PR yet, but thought I'd just address the conflicts notes so it doesn't prevent this PR from being merged :D

packages/yew/src/html/listener/mod.rs

packages/yew/src/virtual_dom/listeners.rs

Pull request has been modified.

…iplexer

bakape · 2021-08-28T16:15:15Z

@siku2 Master merged and all issues/comments addressed.

bakape · 2021-08-28T16:22:31Z

Right, Components v2. I'll push a fix for benchmarks a bit later. This can be merged as is.

PR yewstack#1542 didn't merge in the changes from yewstack#1989 correctly, this is fixed in this commit.

PR #1542 didn't merge in the changes from #1989 correctly, this is fixed in this commit.

bakape added 12 commits August 30, 2020 12:52

yew: partial event listener multiplexer

c1cd37d

web_sys implementaion compiles but the std_web implementation is unfinished. Keeping this only to commit curretn progress before reverting std_web.

Merge remote-tracking branch 'upstream/master' into dev/listener-mult…

71327a1

…iplexer

yew: partial event listener multiplexer

1de087e

Feature parity with master, except for bubbling.

Merge remote-tracking branch 'upstream/master' into dev/listener-mult…

de70a8c

…iplexer

yew/listener: fix and test synchronous listeners

37e269d

yew/listener: add placeholder comments

48e68ac

yew/listener: passive listener test

7c070a6

yew: extend and fix APIs and docs

2209c73

Merge remote-tracking branch 'upstream/master' into dev/listener-mult…

fe91f0a

…iplexer

yew/listener: event bubbling

e56b508

clippy: ignore warning

b49df05

Merge remote-tracking branch 'upstream/master' into dev/listener-mult…

1d1747f

…iplexer

siku2 reviewed Sep 5, 2020

View reviewed changes

bakape and others added 9 commits September 5, 2020 17:57

Update yew/src/callback.rs

51e4cc3

Co-authored-by: Simon <simon@siku2.io>

Update yew/src/html/listener/listener_stdweb.rs

a5d8480

Co-authored-by: Simon <simon@siku2.io>

Apply suggestions from code review

1268b81

Co-authored-by: Simon <simon@siku2.io>

Apply suggestions from code review

af3fc32

Co-authored-by: Simon <simon@siku2.io>

yew/listner: remove redundant function

d065b71

yew/listner: restore delibarate formatting

7db22d0

yew/callback: make Flags a newtype

e4cc4b7

yew/listener: use utility function

389aad2

yew/listener: deferred listeners

041e8e5

bakape added 4 commits September 9, 2020 22:51

yew/listner: input and change tests

c29b786

yew/listener: optimize listener registration

a948b0a

Merge remote-tracking branch 'upstream/master' into dev/listener-mult…

c07dd47

…iplexer

yew/listener: remove benchmark placeholders

709de51

Seems easybench-wasm does not support specifying a module path.

bakape marked this pull request as ready for review September 11, 2020 20:06

bakape added 7 commits August 15, 2021 14:03

Merge remote-tracking branch 'upstream/master' into dev/listener-mult…

2c29b00

…iplexer

yew/listeners: update tests

f1b1720

ci: see how test run on stable

13f4f0c

ci: let's find the new MSRV

d1ea639

ci: try to run integration tests only on stable

9bd2219

yew/test: clean up residual dirty state

cd5a3bc

yew/listeners: minor doc string and inline fixes

26172a2

siku2 previously approved these changes Aug 16, 2021

View reviewed changes

packages/yew/src/html/listener/mod.rs Outdated Show resolved Hide resolved

mc1098 reviewed Aug 17, 2021

View reviewed changes

packages/yew/src/virtual_dom/listeners.rs Show resolved Hide resolved

yew/listener: document reasonning for function

939e97b

bakape added 2 commits August 28, 2021 19:06

Merge remote-tracking branch 'upstream/master' into dev/listener-mult…

cc0fa7f

…iplexer

Merge remote-tracking branch 'upstream/master' into dev/listener-mult…

58c6080

…iplexer

siku2 merged commit 68d2fdb into yewstack:master Aug 28, 2021

mc1098 mentioned this pull request Aug 28, 2021

Add custom event support #1991

Closed

3 tasks

mc1098 pushed a commit to mc1098/yew that referenced this pull request Aug 31, 2021

Fix IntoEventCallback over IntoPropValue

71420f5

PR yewstack#1542 didn't merge in the changes from yewstack#1989 correctly, this is fixed in this commit.

mc1098 mentioned this pull request Aug 31, 2021

Fix IntoEventCallback over IntoPropValue #2025

Merged

2 tasks

siku2 pushed a commit that referenced this pull request Aug 31, 2021

Fix IntoEventCallback over IntoPropValue (#2025)

c307f07

PR #1542 didn't merge in the changes from #1989 correctly, this is fixed in this commit.

mc1098 mentioned this pull request Sep 11, 2021

No way to stop event bubling. #2044

Closed

3 tasks

NickHu mentioned this pull request Oct 12, 2021

Cannot call prevent_default on WheelEvents #2110

Closed

mc1098 mentioned this pull request Oct 12, 2021

Fix default passive option #2111

Merged

3 tasks

voidpumpkin mentioned this pull request Nov 4, 2021

No way to stop event bubbling per callback #2130

Closed

3 tasks

Madoshakalaka mentioned this pull request Nov 22, 2021

No documentation for the opt-in optimization yew::set_event_bubbling(false) #2175

Closed

voidpumpkin added the A-yew Area: The main yew crate label Nov 26, 2021

XX mentioned this pull request Dec 24, 2021

Return the add_listener method for VTag #2298

Closed

WorldSEnder mentioned this pull request Jan 15, 2022

Introduce explicit internal datastructures modeling dom state #2330

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dev/listener multiplexer #1542

Dev/listener multiplexer #1542

bakape commented Sep 3, 2020 •

edited

Loading

siku2 left a comment

jstarry commented Sep 8, 2020

bakape commented Sep 8, 2020

bakape commented Sep 11, 2020

bakape commented Aug 15, 2021 •

edited

Loading

mc1098 commented Aug 15, 2021

bakape commented Aug 28, 2021

bakape commented Aug 28, 2021

Dev/listener multiplexer #1542

Dev/listener multiplexer #1542

Conversation

bakape commented Sep 3, 2020 • edited Loading

Description

Breaking change

Checklist:

siku2 left a comment

Choose a reason for hiding this comment

jstarry commented Sep 8, 2020

bakape commented Sep 8, 2020

bakape commented Sep 11, 2020

bakape commented Aug 15, 2021 • edited Loading

mc1098 commented Aug 15, 2021

bakape commented Aug 28, 2021

bakape commented Aug 28, 2021

bakape commented Sep 3, 2020 •

edited

Loading

bakape commented Aug 15, 2021 •

edited

Loading